include ../common/mixin.jade

doctype html
html
    head
        meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no')
        +conf("校车查询")
        link(rel="stylesheet", href="main.css")
    body
    #bus
        .weui-cells__title 切换车型
        .weui-cells
            .weui-cell.weui-cell_switch
                .weui-cell__bd 切换到教师班车
                .weui-cell__ft
                    input.weui-switch(type="checkbox")

        .weui-cells__title 切换时间
        .weui-cells
            .weui-cell
                .weui-cell__hd
                    label.weui-label(for="") 时间
                .weui-cell__bd
                    select.weui-select
                        option 周一，周二，周三，周四
                        option 周五
                        option 周六
                        option 周日

        .weui-cells__title 班次列表

        .container
            .card
                .weui-flex#am
                    .weui-flex__item
                        .time 上午
                .weui-flex#pm
                    .weui-flex__item
                        .time 下午
                .weui-flex
                    .weui-flex__item 出发30分钟后 首义路c出口 返程，5元/人
        script.
            var switchbus = document.getElementsByClassName("weui-switch")[0];

            switchbus.onclick = function () {
                window.location.href = "teacher.html";
            }

        script.

            // 获取select, option Dom
            var week_select = document.getElementsByTagName("select")[0];
            var week_option = week_select.getElementsByTagName("option");

            function busTime() {
                // 获取显示的am，pm 列表
                var time_am = document.getElementById("am");
                var time_pm = document.getElementById("pm");

                // 获取显示的am，pm 列表
                var item_am_item = time_am.getElementsByClassName("weui-flex__item");
                var item_pm_item = time_pm.getElementsByClassName("weui-flex__item");

                // 清空am, pm 数据
                while (Boolean(item_am_item[1])) {
                    time_am.removeChild(item_am_item[1]);
                }
                while (Boolean(item_pm_item[1])) {
                    time_pm.removeChild(item_pm_item[1]);
                }


                //数据渲染 am, pm
                for (var i = 0; i < (time[getWeekNum()].am.length); i++) {
                    var para = document.createElement("div");
                    para.setAttribute("class", "weui-flex__item")
                    var node = document.createTextNode(time[getWeekNum()].am[i]);

                    para.appendChild(node);
                    time_am.appendChild(para);
                }

                for (var i = 0; i < (time[getWeekNum()].pm.length); i++) {
                    var para = document.createElement("div");
                    para.setAttribute("class", "weui-flex__item")
                    var node = document.createTextNode(time[getWeekNum()].pm[i]);

                    para.appendChild(node);
                    time_pm.appendChild(para);
                }
            }

            // 获取用户选择位置 0-周一-四 1-周五 2- 周六 3-周日
            function getWeekNum() {
                week_select__value = week_select.selectedIndex;
                week_option[week_select__value] = true;
                return week_select__value;
            }


            // 依据默认时间矫正当前星期
            function defaultWeek() {
                // 获取当前 星期几
                var week_now = new Date().getDay();

                switch (week_now) {
                    case 1, 2, 3, 4:
                        week_option[0].selected = true;
                        break;
                    case 5:
                        week_option[1].selected = true;
                        break;
                    case 6:
                        week_option[2].selected = true;
                        break;
                    case 0:
                        week_option[3].selected = true;
                        break;
                }
            }

            window.onload = function () {
                //根据当前日期确定时间
                defaultWeek();
                //渲染当前数据
                busTime();

                week_select.onchange = function () {
                    getWeekNum();
                    busTime();
                }
            }

        script.
            time = {
                "0": {
                    "am": ["8:30", "10:30"],
                    "pm": ["12:30", "15:30", "17:30"]
                },
                "1": {
                    "am": ["8:30", "9:30", "10:30", "11:30"],
                    "pm": ["12:30", "13:30", "14:30", "15:30", "16:30", "17:30"]
                },
                "2": {
                    "am": ["8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30"],
                    "pm": ["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
                },
                "3": {
                    "am": ["8:30", "9:30", "10:30", "11:30"],
                    "pm": ["13:00", "14:00", "15:00", "16:00", "17:00"]
                }
            }

        .weui-cells__title 校车位置

        .container
            #wrap.my-map
                #mapContainer

        script(src='http://webapi.amap.com/maps?v=1.4.0&key=ccd246a376313ca38a649a9edd48131c')


        script.
            !function () {
                var infoWindow, map, level = 15,

                    center = {
                        lng: 114.296115,
                        lat: 30.441589
                    },

                    // 标记及路线图
                    features = [{
                        type: "Polygon",
                        name: "乘车点",
                        desc: "校南门，陈一丹伉俪图书馆附近",
                        strokeWeight: 2,
                        strokeColor: "#F0202F",
                        strokeOpacity: 1,
                        fillColor: "red",
                        fillOpacity: 0.2,
                        lnglat: [{
                            lng: 114.295093,
                            lat: 30.4391
                        }, {
                            lng: 114.295088,
                            lat: 30.438462
                        }, {
                            lng: 114.295646,
                            lat: 30.438467
                        }, {
                            lng: 114.295635,
                            lat: 30.439096
                        }]
                    },
                        {
                            type: "Marker",
                            name: "绿迪校车",
                            desc: "校园巴士，30分钟后返程，5元/人",
                            color: "red",
                            icon: "pot",
                            offset: {
                                x: -11,
                                y: -26
                            },
                            lnglat: {
                                lng: 114.295335,
                                lat: 30.438846
                            }
                        },
                        {
                            type: "Marker",
                            name: "307公交站",
                            desc: "",
                            color: "blue",
                            icon: "pot",
                            offset: {
                                x: -11,
                                y: -26
                            },
                            lnglat: {
                                lng: 114.30005,
                                lat: 30.440266
                            }
                        },
                        {
                            type: "Marker",
                            name: "首义路c出口",
                            desc: "超市门口返程",
                            color: "red",
                            icon: "cir",
                            offset: {
                                x: -9,
                                y: -31
                            },
                            lnglat: {
                                lng: 114.31052,
                                lat: 30.533175
                            }
                        },
                        {
                            type: "Polygon",
                            name: "终点站",
                            desc: "首义路c出口，到达即返程。",
                            strokeWeight: 2,
                            strokeColor: "#19A4EB",
                            strokeOpacity: 1,
                            fillColor: "red",
                            fillOpacity: 0.7,
                            lnglat: [{
                                lng: 114.310397,
                                lat: 30.533387
                            }, {
                                lng: 114.310343,
                                lat: 30.533027
                            }, {
                                lng: 114.310703,
                                lat: 30.532976
                            }, {
                                lng: 114.310756,
                                lat: 30.533355
                            }]
                        },
                        {
                            type: "Polyline",
                            name: "往返路线",
                            desc: "",
                            strokeWeight: 5,
                            strokeColor: "#F0202F",
                            strokeOpacity: 0.77,
                            lnglat: [{
                                lng: 114.295415,
                                lat: 30.43866
                            }, {
                                lng: 114.295415,
                                lat: 30.438231
                            }, {
                                lng: 114.299234,
                                lat: 30.438342
                            }, {
                                lng: 114.300736,
                                lat: 30.441783
                            }, {
                                lng: 114.300865,
                                lat: 30.44378
                            }, {
                                lng: 114.299148,
                                lat: 30.451476
                            }, {
                                lng: 114.298805,
                                lat: 30.455249
                            }, {
                                lng: 114.298805,
                                lat: 30.455915
                            }, {
                                lng: 114.292024,
                                lat: 30.458949
                            }, {
                                lng: 114.293226,
                                lat: 30.461242
                            }, {
                                lng: 114.293355,
                                lat: 30.462167
                            }, {
                                lng: 114.293441,
                                lat: 30.46446
                            }, {
                                lng: 114.29314,
                                lat: 30.477813
                            }, {
                                lng: 114.282325,
                                lat: 30.477739
                            }, {
                                lng: 114.279193,
                                lat: 30.478368
                            }, {
                                lng: 114.275931,
                                lat: 30.480106
                            }, {
                                lng: 114.285544,
                                lat: 30.494233
                            }, {
                                lng: 114.295758,
                                lat: 30.50492
                            }, {
                                lng: 114.299062,
                                lat: 30.510836
                            }, {
                                lng: 114.300436,
                                lat: 30.518119
                            }, {
                                lng: 114.301122,
                                lat: 30.518969
                            }, {
                                lng: 114.301509,
                                lat: 30.51945
                            }, {
                                lng: 114.302109,
                                lat: 30.519524
                            }, {
                                lng: 114.304813,
                                lat: 30.51982
                            }, {
                                lng: 114.309019,
                                lat: 30.52189
                            }, {
                                lng: 114.310564,
                                lat: 30.52274
                            }, {
                                lng: 114.312237,
                                lat: 30.523701
                            }, {
                                lng: 114.306787,
                                lat: 30.525439
                            }, {
                                lng: 114.30919,
                                lat: 30.533497
                            }, {
                                lng: 114.310564,
                                lat: 30.533276
                            }]
                        },
                        {
                            type: "Marker",
                            name: "灵吴墩",
                            desc: "万能中转公交站",
                            color: "blue",
                            icon: "pot",
                            offset: {
                                x: -11,
                                y: -26
                            },
                            lnglat: {
                                lng: 114.276523,
                                lat: 30.480787
                            }
                        }
                    ];


                function loadFeatures() {
                    for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
                        data = features[i];
                        switch (data.type) {
                            case "Marker":
                                feature = new AMap.Marker({
                                    map: map,
                                    position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                                    zIndex: 3,
                                    extData: data,
                                    offset: new AMap.Pixel(data.offset.x, data.offset.y),
                                    title: data.name,
                                    content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
                                });
                                break;
                            case "Polyline":
                                for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                                    path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                                }
                                feature = new AMap.Polyline({
                                    map: map,
                                    path: path,
                                    extData: data,
                                    zIndex: 2,
                                    strokeWeight: data.strokeWeight,
                                    strokeColor: data.strokeColor,
                                    strokeOpacity: data.strokeOpacity
                                });
                                break;
                            case "Polygon":
                                for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                                    path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                                }
                                feature = new AMap.Polygon({
                                    map: map,
                                    path: path,
                                    extData: data,
                                    zIndex: 1,
                                    strokeWeight: data.strokeWeight,
                                    strokeColor: data.strokeColor,
                                    strokeOpacity: data.strokeOpacity,
                                    fillColor: data.fillColor,
                                    fillOpacity: data.fillOpacity
                                });
                                break;
                            default:
                                feature = null;
                        }
                        if (feature) {
                            AMap.event.addListener(feature, "click", mapFeatureClick);
                        }
                    }
                }

                function mapFeatureClick(e) {
                    if (!infoWindow) {
                        infoWindow = new AMap.InfoWindow({
                            autoMove: true
                        });
                    }
                    var extData = e.target.getExtData();
                    infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
                    infoWindow.open(map, e.lnglat);
                }

                map = new AMap.Map("mapContainer", {
                    center: new AMap.LngLat(center.lng, center.lat),
                    level: level
                });
                loadFeatures();
                /*
                //定位组件
                map.plugin('AMap.Geolocation', function () {
                    geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位，默认:true
                        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                        buttonOffset: new AMap.Pixel(8, 10),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                        buttonPosition: 'RB'
                    });

                    map.addControl(geolocation);
                    geolocation.getCurrentPosition();
                    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                });

                //解析定位结果
                function onComplete(data) {
                    var str = ['定位成功'];
                    str.push('经度：' + data.position.getLng());
                    str.push('纬度：' + data.position.getLat());
                    if (data.accuracy) {
                        str.push('精度：' + data.accuracy + ' 米');

                    }//如为IP精确定位结果则没有精度信息
                    str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
                    document.getElementById('tip').innerHTML = str.join('<br>');
                }

                //解析定位错误信息
                function onError(data) {
                    document.getElementById('tip').innerHTML = '定位失败';
                }
                */
            }();


        +footer

